<template>
    <view>
        <u--form :model="form" ref="uForm" :rules="rules" labelWidth="180rpx">
            <view class="event-content">
                <u-form-item label="巡查区域" prop="swLocation" required>
                    <u-input v-model="form.swLocation" inputAlign="right" border="none" placeholder="请输入" />
                </u-form-item>
                <u-form-item label="巡查时间" prop="checkTime" required>
					<uni-datetime-picker 
					type="datetime" 
					v-model="form.checkTime"  
					:border="false" 
					 @change="(value) => bindTimeChange('checkTime', value)"
					/>
                </u-form-item>
                <u-form-item label="巡查情况" prop="swCheckSituation" label-position="top" required>
                    <u--textarea :maxlength="1000" border="none" v-model="form.swCheckSituation"
                        placeholder="请输入巡查情况"></u--textarea>
                </u-form-item>
				<u-form-item label="巡查图片" prop="patrolImage" label-position="top" required>
				  <FileUpload v-model="form.patrolImage"></FileUpload>
				</u-form-item>
                <u-form-item label="处置结果" prop="swCheckResult" label-position="top" required>
                    <u--textarea :maxlength="1000" border="none" v-model="form.swCheckResult"
                        placeholder="请输入处置结果"></u--textarea>
                </u-form-item>
            </view>
        </u--form>
        <view class="footer-black"></view>
        <view class="footer-btn">
            <view @click="gotoBack()">取消</view>
            <view class="footer-btn-confirm" @click="submit()">提交</view>
        </view>
    </view>
</template>

<script>
import * as PatrolLogApi from "@/api/patrolLog.js"
import { formatDate, } from "@/utils/common.js"
import FileUpload from "@/components/file-upload/index.vue"
export default {
  components: { FileUpload },
    data() {
        return {
            checkDate: '',
            form: {
                swLocation: null,
                checkTime: Date.now(),
                swCheckSituation: null,
                swCheckResult: null,
                patrolImage:null
            },
            rules: {
                swLocation: [{ required: true, message: '请输入巡查区域', trigger: ['blur', 'change'] }],
                checkTime: [{ required: true, message: '请选择巡查时间' }],
                swCheckSituation: [{ required: true, message: '请输入巡查情况', trigger: ['blur', 'change'] }],
                swCheckResult: [{ required: true, message: '请输入处置结果', trigger: ['blur', 'change'] }],
                patrolImage: [{ required: true, message: '请上传巡查图片', trigger: ['blur', 'change'] }],
            },
            status: true,
            detailData: {
                creator: '肖万亮 ',
                createTime: ' 2023-02-28  15:40:49',
                name: '小傻通知'
            },
            stepList: [{ createTime: '111', content: '' }]
        };
    },

    methods: {
        bindTimeChange(key, e) {
			console.log('kerr',key,e)
            this.form[key] = e.detail.value
            this.$refs.uForm.validateField(key)
        },
        gotoBack(item) {
            uni.navigateBack();
        },
        gotoHandle(item) {
            uni.navigateTo({
                url: `/pages/event/event-handle/index?id=${item.id}`
            })
        },
        submit() {
            this.$refs.uForm.validate().then(res => {
				this.form.swCheckTime=formatDate(this.form.checkTime)
				delete this.form.checkTime
                PatrolLogApi.createPatrolLogData({ ...this.form }).then(res => {
                    this.gotoBack()
                }).catch(errors => {
                    uni.$u.toast(errors)
                })
            }).catch(errors => {
                uni.$u.toast('校验失败')
            })
        },
    },
    onLoad() {
        this.form.checkTime =Date.now()
    }
}
</script>

<style lang="scss">
page {
    background-color: #ffffff;
    padding: 16rpx 32rpx 34rpx;
    box-sizing: border-box;
}


.event-content {
    font-weight: 400;
    font-size: 28rpx;
    color: #666666;
    margin: 32rpx 0;
}

.event-detail-item {
    height: 112rpx;
    background: #FFFFFF;
    border-radius: 2rpx solid #0000001a;
}

.line-title-right {
    text-align: right;
    height: 80rpx;
    line-height: 80rpx;
    float: right;
    color: #1E71FE;
    font-size: 24rpx;
    align-items: center;

    .u-switch {
        margin-left: 10rpx;
    }
}

picker {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: right;
}

.footer-black {
    height: 130rpx;
}
</style>